<template>
  <div class="list fill">
    <div class="thead tr flex-row w-fill">
      <div class="t1 t">歌曲</div>
      <div class="t2 t">歌手</div>
      <div class="t3 t">专辑</div>
      <div class="t4 t">时长</div>
    </div>
    <div class="tr song flex-row " v-for="(item,index) in list" :key="index" @dblclick.left="handlePlay(index)">
      <div class="t1 t flex-row items-center justify-between">
        <span class="songname"><WIcon class="rotate" size="20" v-if="item.songmid===$parent.$parent.currentSong.songmid" icon="icon-changpian"/> {{item.songname}}</span>
        <i @click="handlePlay(index)"  class="el-icon-caret-right playicon"/></div>
      <div class="t2 t">
        <span class="singername" @click="handleNavToSinger(item)" v-for="(item,index) in item.singer" :key="index">{{item.name}}</span>
      </div>
      <div class="t3 t">
        <span class="album" @click="handleAlbumClick(item)">{{item.albumname}}</span>
      </div>
      <div class="t4 t"></div>
    </div>
  </div>
</template>

<script>
import WIcon from "@/components/icon/WIcon"
export default {
  name: "MusicList",
  components: {WIcon},
  inject: ["getPlayer", "navigateTo"],
  props:{
    list: {
      type: Array,
      default: () => ([])
    }
  },
  methods: {
    handlePlay(index) {
      let player = this.getPlayer()
      if(!player){
        this.$msg.info("等待播放器初始化")
      }else{
        player.setNetworkList(this.list, index)
      }
    },
    handleNavToSinger(singer) {
      this.navigateTo(`/singer/${singer.mid}-${singer.name}`)
    },
    handleAlbumClick(item) {
      console.log(item)
      this.navigateTo(`/album/${item.albummid}`)
    }
  }

}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";
  .thead{
    color: #687492;
  }
  .tr{
    padding: 0 $pn;
    line-height: 40px;
    .t1{
      width: 40%;
      .playicon{
        font-size: 20px;
        color: $text-info;
        margin-right: 20px;
        display: none;
        cursor: pointer;
      }
    }
    .t2{
      width: 30%;
    }
    .t3{
      width: 20%;
    }
    .t4{
      width: 10%;
    }
  }
  .t, .songname{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .song{
    overflow: hidden;
    width: 100%;
    &:hover{
      background-color: rgba(255,255,255,0.2);
      .playicon{
        display: unset;
      }
    }
    .singername{
      cursor: pointer;
      &:not(:first-child):before{
        content: " / ";
      }
      &:hover{
        color: gold;
      }
    }
  }
  .album{
    cursor: pointer;
    &:hover{
      color: gold;
    }
  }

  .rotate{
    animation: 2s rotate infinite linear;
  }
  @keyframes rotate {
    from{
      transform: rotateZ(0);
    }
    to{
      transform: rotateZ(360deg);
    }
  }
</style>
